<script setup lang="ts">
import pageWrap from "@/components/pageWrap/index.vue";
import { Collapse, CollapsePanel, message } from "ant-design-vue";
import { ref } from "vue";
import defaultImg from "@/assets/dataV/datav.png";
import { useLazyData } from "@/hooks/useFeat";
import { Icon } from "@iconify/vue";
import ImgLocality from "./components/imgLocality/index.vue";
import imgLocalityJson from "./components/imgLocality/index.json";
import imgLazy from "./components/imgLazy/index.json";
import lazyDataLoad from "./components/lazyDataLoad/index.json";
import CodeMirror from "@/components/CodeMirror/index.vue";
import TopSticky from "./components/topSticky/index.vue";
import TopStickyJson from "./components/topSticky/index.json";
import DomResize from "./components/domResize/index.vue";
import DomResizeJson from "./components/domResize/index.json";
// 折叠面板
const activeKey = ref();
const codeRef = ref();

const lazyLoadArr: any = ref();
const getTargetList = () => {
  lazyLoadArr.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
};
const target = useLazyData(getTargetList());


const handlePath = (type: string) => {
  switch (type) {
    case "imgLazy":
      codeRef.value.open("图片懒加载", imgLazy);
      break;
    case "lazyDataLoad":
      codeRef.value.open("数据懒加载", lazyDataLoad);
      break;
    case "imgLocality":
      codeRef.value.open("图片局部放大预览", imgLocalityJson);
      break;
    case "topSticky":
      codeRef.value.open("吸顶", TopStickyJson);
      break;
    case "domResize":
      codeRef.value.open("dom尺寸监视", DomResizeJson);
      break;
    default:
      message.error("暂无代码示例");
      break;
  }
};
</script>
<template>
  <pageWrap headerContent>
    <template v-slot:header>
      <div class="text-2xl h-12 pl-5 pt-2 font-bold">elements相关功能</div>
      <div class="pl-5">响应式监听目标元素的相关事件</div>
    </template>
    <div class="overflow-y-auto pb-20">
      <div>
        <div class="bg-white p-2">
          <Collapse v-model:activeKey="activeKey">
            <CollapsePanel key="1" header="图片懒加载">
              <div class="flex">
                <img
                  style="height: 200px; width: auto"
                  v-lazy="defaultImg"
                  alt=""
                />
                <div>错误回调 显示默认图片</div>
              </div>
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('imgLazy')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="2" header="数据懒加载">
              <div class="flex">
                <ul>
                  <li v-for="(item, index) in lazyLoadArr">{{ item }}</li>
                </ul>
                <div ref="target">
                  调用懒加载方法,ref="target"的元素到达可视区时会执行getTargetList()函数
                </div>
              </div>
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('lazyDataLoad')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="3" header="图片局部放大预览">
              <ImgLocality />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('imgLocality')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="4" header="吸顶">
              <div>我是吸顶</div>
              <TopSticky />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('topSticky')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="5" header="dom尺寸监视">
              <DomResize />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('domResize')"
              /></template>
            </CollapsePanel>
          </Collapse>
        </div>
      </div>
    </div>
    <CodeMirror ref="codeRef" />
  </pageWrap>
</template>
<style scoped lang="less"></style>
